<template>
  <el-dialog title="提示" :visible="dialogVisible" width="30%" @close="close">
    <div class="choose-box">
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【题型】：{{ formateQuestionType(objList.questionType) + '题' }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【编号】：{{ objList.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【难度】：{{ formateDifficulty(objList.difficulty) }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【标签】：{{ objList.tags }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【学科】：{{ objList.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【目录】：{{ objList.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            【方向】：{{ objList.direction }}
          </div></el-col
        >
      </el-row>
    </div>
    <hr />
    <!-- 题干区域 -->
    <div>
      <p>【题干】：</p>
      <div>
        <pre v-html="objList.question" style="color: blue"></pre>
      </div>
      <!-- 多选单选框开始 -->

      <div v-if="objList.questionType == 3 ? false : true">
        <p>
          {{ formateQuestionType(objList.questionType) + '题' }} 选项:
          (以下选中的选项为正确答案)
        </p>
        <!-- 单选框 -->
        <div v-if="objList.questionType == 1 ? true : false">
          <el-radio
            @change="radio = 1"
            :key="item.id"
            :label="item.isRight"
            v-model="radio"
            v-for="item in objList.options"
            style="display: block; margin: 10px"
            >{{ item.title }}</el-radio
          >
        </div>
        <!-- 多选框 -->
        <div v-if="objList.questionType == 2 ? true : false">
          <el-checkbox
            v-for="item in objList.options"
            v-model="item.isRight === 1 ? true : false"
            :key="item.code"
            style="display: block; margin: 10px"
            >{{ item.title }}</el-checkbox
          >
        </div>
      </div>
      <!-- 多选单选框结束 -->
    </div>
    <hr />
    <!-- 参考答案 -->
    <div>
      <span>【参考答案】：</span>
      <el-button type="danger" @click="clckVideo">视频答案解析</el-button>
      <div>
        【答案解析】： <span v-html="objList.answer"></span>
        <video
          :src="objList.videoURL"
          controls="controls"
          style="width: 400px; height: 300px"
          v-show="isEaitUrl"
        ></video>
      </div>
      <hr />
      <!-- 答案解析 -->
    </div>
    <hr />
    <!-- 题目备注 -->
    <div>
      <span>【题目备注】：{{ objList.remarks }}</span>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="close">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'diaLogDetail',
  props: ['dialogVisible', 'id'],
  data () {
    return {
      isEaitUrl: false,
      radio: 1,
      itemList: {},
      objList: {
        // questionType: '',
        // id: '',
        // difficulty: '',
        // tags: '',
        // subjectID: '',
        // catalogID: '',
        // direction: '',
        // question: '',
        // option: {
        //   code: '',
        //   title: '',
        //   img: '',
        //   id: '',
        //   isRight: ''
        // },
        // videoURL: '',
        // answer: '',
        // remarks: ''
      }
    }
  },
  created () {
    this.getDetail()
  },
  computed: {},
  methods: {
    clckVideo () {
      this.isEaitUrl = true
    },
    // 格式化题型
    formateQuestionType (num) {
      const item = questionType.find(it => it.value === num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 格式化难度
    formateDifficulty (num) {
      const item = difficulty.find(it => it.value === num)
      if (item) {
        return item.label
      } else {
        return '不能确定'
      }
    },
    // 获取题目详细信息
    async getDetail () {
      const res = await detail({ id: this.id })
      console.log('res: ', res)
      this.objList = res.data
    },
    // 对话框关闭事件
    close () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 900px !important;
}
.el-col {
  margin-bottom: 20px;
}
</style>
